<template>
  <div class="filters">
    <!-- 筛选 -->
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        {{fdata.info.departCity}} - {{fdata.info.destCity}}
        /
        {{fdata.info.departDate}}
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="linkageFilter">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in fdata.options.airport"
            :key="index"
          ></el-option>
          <!-- value值也是item;因为数据源的flights数组中的org_airport_name: "白云机场" 也是同一个字符串，后期筛选功能可以匹配-->
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="linkageFilter">
          <el-option
            :label="`${item.from}:00 - ${item.to}:00`"
            :value="`${item.from}-${item.to}`"
            v-for="(item,index) in fdata.options.flightTimes"
            :key="index"
          ></el-option>
          <!-- value的值? 后期 数据源的起飞时间 要 在from和to之间进行范围的判断（dep_time >from 且 <to）；即两个数据应该要分开，才能方便处理 -->
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="linkageFilter">
          <el-option
            :label="item"
            :value="item"
            v-for="(item,index) in fdata.options.company"
            :key="index"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型" @change="linkageFilter">
          <el-option
            :label="item.name"
            :value="item.value"
            v-for="(item,index) in airSizeList"
            :key="index"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- 撤销 -->
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  //1.接收flights组件传过来的筛选组件的数据 -- 父传子
  props: ["fdata"],
  //   props: {
  //     fdata: {
  //       type: Object,
  //       // 设置默认值
  //       default: () => {
  //         // 默认的设置，如果有父传子情况下，不会执行
  //         return {};
  //       }
  //     }
  //   },
  data() {
    return {
      airport: '',           //起飞机场
      flightTimes: '',       //起飞时间 
      company: '',           //航空公司
      airSize: '',            //机型
      airSizeList: [         //机型下拉框数据
        { name: '大', value: 'L' },
        { name: '中', value: 'M' },
        { name: '小', value: 'S' }
      ]
    }
  },
  methods: {
    //实现筛选的联动   
    linkageFilter() {
      // 以后对数据进行操作的时候，需要考虑是否需要保留一个副本，如果数据后期还有重复使用的可能，那么最好将数据复制一份进行操作
      let newlist = [...this.fdata.flights];
      // 通过取 v-model的值来 判断用户是否筛选了这一项
      if (this.airport) {
        newlist = newlist.filter(v => {
          return v.org_airport_name == this.airport;
        });
      }
      if (this.flightTimes) {
        let [from, to] = this.flightTimes.split("-");
        newlist = newlist.filter(v => {
          let start = +v.dep_time.split(":")[0]; // ["07","55"] >> 7
          return start >= from && start < to;
        });
      }
      if (this.company) {
        newlist = newlist.filter(v => {
          return v.airline_name == this.company
        });
      }
      if (this.airSize) {
        newlist = newlist.filter(v => {
          return v.plane_size == this.airSize
        })
      }

      this.$emit('filterData', newlist)
    },

    // 选择机场时候触发
    handleAirport(value) {
      //   console.log(value);
      let newlist = this.fdata.flights.filter(v => {
        return v.org_airport_name == value
      })
      this.$emit('filterData', newlist)
    },
    // 选择出发时间时候触发
    handleFlightTimes(value) {
      // 6,12
      let arr = value.split("-"); // [6,12]
      let newlist = this.fdata.flights.filter((v) => {
        let start = +v.dep_time.split(":")[0]; // ["07","55"] >> 7
        return start >= arr[0] && start < arr[1];
      });
      this.$emit('filterData', newlist)
    },

    // 选择航空公司时候触发
    handleCompany(value) {
      //   console.log(value);
      //进行筛选功能--遍历数组，返回匹配成功的数组(要定义一个新的存起来)
      let newlist = this.fdata.flights.filter(v => {     //遍历的数组是 源数据；从源数据中筛选
        // return this.fdata.flights.airline_name == value     错误；里面的每一项 都是v
        return v.airline_name == value
      })
      //   console.log(newlist);
      //将筛选的得到的数据，告诉父组件，叫他渲染
      this.$emit('filterData', newlist)
    },

    // 选择机型时候触发
    handleAirSize(value) {
      console.log(value);
      let newlist = this.fdata.flights.filter(v => {
        return v.plane_size == value
      })
      this.$emit('filterData', newlist)
      console.log(newlist);
    },

    // 撤销条件时候触发
    handleFiltersCancel() {
      //1.清空v-model
      this.airport = ''           //起飞机场
      this.flightTimes = ''       //起飞时间 
      this.company = ''           //航空公司
      this.airSize = ''            //机型
      //2.还原数据列表,传给父组件的值 应该是原来的数组、
      this.$emit('filterData', this.fdata.flights)
    },
  }
}
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>